import React from "react"
import book from "./styles/booklist.module.css"

interface Book  {
    url: string,
    title: string,
    author: string,
    type: string,
    name: string
}

const books: Book[] = [
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name: "西游记之师傅你别再作妖了"
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    },
    {
        url: "https://static.zongheng.com/upload/cover/2d/3b/2d3b5c757a618cb0f655ebeabf5da571.jpeg",
        title: "穿越为唐僧，获得收徒系统",
        author: "江如是",
        type: "古装仙侠",
        name:'西游记之师傅你别再作妖了'
    }
]

const Booklist: React.FC<{ title: string }> = ({ title }) => {
    return (
        <div className={book.app}>
            <div className={book.title}>{ title }</div>
            <div className={book.books}>
                {
                    books.map((item,index) => (
                        <div key={index}  className={book.book_item}>
                            <div className={book.book_img}>
                                <img src={item.url} alt="" />
                            </div>
                            <div className={book.book_info}>
                                <div className={book.name}>{ item.name }</div>
                                <div className={book.subname}>{ item.title }</div>
                                <div className={book.author}>
                                    <span className={book.author_name}>{ item.author }</span>·
                                    <span className={book.author_type}>{ item.type }</span>
                                </div>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default Booklist